import * as React from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Item, Button } from 'components'
import { VerifyView } from '../../../../viewComponent'
import './Signature.less'
import { post } from '../../../../utils'

// const Step = Steps.Step

export default class Signature extends React.Component<any, any> {

    public state = {
        stepIndex: 0,
        name: '',
        card: ''
    }

    public componentDidMount () {
        const { userInfo } = this.props
        if (!userInfo.phone) {
            Toast.info('请先绑定手机号！', 2, () => {this.goToUrl('/my/editPhoneNumber')}, true)
        }
    }

    public render(): JSX.Element {
        const { name, card } = this.state
        const { userInfo } = this.props
        return (
            <div className="signature">
                {
                    (userInfo.real_name && userInfo.id_card) 
                    ? ''
                    : <VerifyView/>
                }
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>绑定身份证</div>}
                    fixed={true}
                />
                <div className="signature_topStep">
                    <img src={require('../../../../assets/signature_bg.png')} />
                    <div className="signature_topStepContent signature_topTitleContent">
                        <div>
                            <img src={require('../../../../assets/signature_idCard.png')} />
                            <p>绑定身份证</p>
                        </div>
                    </div>
                </div>
                <div className="signature_scanWrap">
                    <div className="signature_scanWrap_img">
                        <img src={require('../../../../assets/signature_IdCardScan.png')} />
                    </div>
                    <div className="signature_scanWrap_text">扫一扫，自动识别以下信息</div>
                </div>
                <Item 
                    className="signature_item" 
                    title={<div className="signature_item_title">本人姓名</div>} 
                    value={<div className="signature_item_value"><input placeholder="请输入姓名" type="text" value={name} onChange={this.handleInput.bind(this, 'name')} /></div>} 
                />
                <Item 
                    className="signature_item" 
                    title={<div className="signature_item_title">身份证号</div>}
                    value={<div className="signature_item_value"><input maxLength={18}  placeholder="请输入身份证号" type="text" value={card} onChange={this.handleInput.bind(this, 'card')} /></div>} 
                />
                <div className="signature_operation">
                    <Button className="signature_operation_btn" disabled={name.length === 0 || card.length === 0} onClick={this.handleBindInfo}>立即提交</Button>
                </div>
            </div>
        )
    }
    private handleInput = (key: string, e: any) => {
        let val: any
        if (key === 'name') {
            val =  e.target.value.replace(/[^\u4E00-\u9FA5]/g, '')
        } else if (key === 'card') {
            val =  e.target.value.replace(/\D/g, '')
        }
        this.setState({
            [key]: val
        })
    }
    // private handleChekckCard = () => {
    //     const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    //     const { card } = this.state
    //     if (reg.test(card) === false) {
    //         return false
    //     }
    //     return true
    // }
    private handleBindInfo = () => {
        // if (this.handleChekckCard()) {
        //     Toast.info('身份证号码不正确')
        //     return
        // }
        const { userInfo } = this.props
        const { name, card } = this.state
        Toast.info('用户匹配中...')
        const bind = () => {
            post('usersapi/userSfzBind', {
                userId: userInfo.id,
                card,
                name
            }).then((data: any) => {
                Toast.success('用户绑定成功！', 2, this.handleSetUserInfo)
            })
        }
        // 后台判断是否匹配
        post('usersapi/userIdCard', {
            idcard: card,
            realname: name
        }).then((data: any) => {
            Toast.info('用户匹配成功！', 2, bind)
        })
        
    }
    private handleSetUserInfo = () => {
        const { userInfo, SET_USER_INFO } = this.props
        const { name, card } = this.state
        const info = Object.assign({}, userInfo)
        info.real_name = name
        info.id_card = card
        SET_USER_INFO(info)
        this.props.history.goBack()
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}